import React from 'react'
import { Form, Input, Row, Col, Tag, Button, message, Icon } from 'antd'
import styles from './style.css'
import Avatar from '../upload.js'
import { connect } from 'dva'
import { artDetail} from '../../../services/article'
const FormItem = Form.Item;
const { TextArea } = Input;
const CheckableTag = Tag.CheckableTag;
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    }
};
class DetailForm extends React.Component{
    state = { 
        selectedTags:[],
        tagData: [],
        tagName:'',
        detail:[]
    };
    async componentWillMount(){
        const {id} = this.props;
        const data = await artDetail(id);
        if(data.code == 0){
            const detail = data.data;
            const tagList = data.data.tagList;
            const selectTag = data.data.tagList;
            this.props.getPic(detail)
            this.setState({
                detail:detail,
                tagData:tagList,
                selectedTags: selectTag,
            })
            this.props.dispatch({
                type:'article/updateState',
                payload:tagList,
            })
        }else{
            message.error(data.msg);
        }
    }
    
    //获取输入的关键字
    handleInput =(e)=>{
        this.setState({
            tagName:e.target.value
        })
    }
    //点击添加按钮,添加关键字
    addTags =()=>{
        const { tagName, tagData, selectedTags} = this.state;
        if(tagName.indexOf(' ') == -1){
            if(tagName.length == '' || tagName === undefined){
                message.error('输入的关键字不能为空！',3);
                return;
            }else{
                this.setState({
                    tagName:''
                })
                if(selectedTags == tagData){
                    if(tagData.indexOf(tagName) == -1){
                        tagData.push(tagName);
                        this.setState({
                            tagData,
                        })
                        this.props.handleTags(selectedTags)
                    }else{
                        message.error('关键字已存在！',3)
                    }
                }else{
                    if (tagData.indexOf(tagName) == -1) {
                        tagData.push(tagName);
                        selectedTags.push(tagName)
                        this.setState({
                            tagData,
                            selectedTags,
                        })
                        this.props.handleTags(selectedTags)
                    } else {
                        message.error('关键字已存在！', 3)
                    }
                }
            
            }
        }else{
            message.error('输入的关键字不能有空格', 3)
        }
       
    }

    //点击删除关键字
    deleteIcon =(tag)=>{
        if (this.state.tagData.indexOf(tag) > -1){
            const index = this.state.tagData.indexOf(tag);
            this.state.tagData.splice(index,1);
            this.setState({
                tagData:this.state.tagData
            })
        }else{
            return 
        }
        
    }
    render(){
        const { form, getArticlePic} = this.props;
        const { getFieldDecorator} = form;
        const { tagName, tagData, selectedTags,detail} = this.state;
        return(
            <div>
                <Row className={styles.Form}>
                    <Col>
                        <Form>
                            <FormItem label="标题" {...formItemLayout}>
                                {getFieldDecorator('title', {
                                    initialValue:detail ? detail.title : '',
                                    rules: [{ required: true, message: '请输入标题' }],
                                })(
                                    <Input placeholder="请输入标题"/>
                                )}
                            </FormItem>
                            <FormItem label="标题图片" {...formItemLayout}>
                                {getFieldDecorator('pic', {
                                    initialValue: detail ? detail.pic : '',
                                    rules: [{ required: true, message: '请上传标题图片' }],
                                })(
                                    <Avatar title="标题图片" imgPic={detail ? detail.pic : ''} onChange={getArticlePic}/>
                                )}
                            </FormItem>
                            <FormItem label="内容" {...formItemLayout}>
                                {getFieldDecorator('htmlCode', {
                                    initialValue:detail ? detail.htmlCode : '',
                                    rules: [{ required: true, message: '请输入内容' }],
                                })(
                                    <TextArea rows={7} placeholder="请输入内容"/>
                                )}
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <Row>
                            <Col span={18}>
                            </Col>
                            <Col span={6}>
                                <span style={{ float: 'right' }}><i style={{color:'red'}}>*</i>关键字:</span>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={18}>
                        <div>
                            {
                                tagData.map((tag, index) => {
                                    return (
                                        <CheckableTag 
                                            className={styles.tagData}
                                            key={tag} 
                                            checked={tagData.indexOf(tag) > -1} 
                                        >
                                            {tag}
                                            <Icon type="close-circle" theme="outlined" key={index} className={styles.Tagicon} onClick={()=>{this.deleteIcon(tag)}}/>
                                        </CheckableTag>
                                    )
                                })
                            }
                        </div>
                    </Col>
                </Row>
                <Row className={styles.footer}>
                    <Col span={6}></Col>
                    <Col span={18}>
                        <Input placeholder="输入需要添加的关键字" className={styles.input} onChange={this.handleInput} value={tagName}/>
                        <Button type="primary" onClick={this.addTags}>添加</Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <Row>
                            <Col span={18}>
                            </Col>
                            <Col span={6}>
                                <span style={{ float: 'right' }}>数据:</span>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={1}></Col>
                    <Col span={17}>
                        <Row>
                            <Col span={5}>
                                <Row>
                                    <Col span={11}>
                                        <span className={styles.font}>阅读量</span>
                                    </Col>
                                    <Col span={1}></Col>
                                    <Col span={12}>{detail.read}</Col>
                                </Row>
                            </Col>
                            <Col span={5}>
                                <Row>
                                    <Col span={11}>
                                        <span className={styles.font}>收藏数</span>
                                    </Col>
                                    <Col span={1}></Col>
                                    <Col span={12}>{detail.favorite}</Col>
                                </Row>
                            </Col>
                            <Col span={5}>
                                <Row>
                                    <Col span={11}>
                                        <span className={styles.font}>点赞数</span>
                                    </Col>
                                    <Col span={1}></Col>
                                    <Col span={12}>{detail.like}</Col>
                                </Row>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row className={styles.end}></Row>

            </div>
        )
    }
}
export default Form.create()(connect(({article})=>({article}))(DetailForm));